<template>
  <div>
    <!-- <van-nav-bar :title="title" :left-arrow="true" left-text="返回" /> -->
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div ref="imageTofile" v-if="imgUrl.length == 0">
      <van-cell-group :border="false">
        <h4
          style="
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
            margin-bottom: 20px;
          "
        >
          合 作 协 议
        </h4>
        <van-cell
          title="甲方: 龙港区惠生活百货经营中心"
          :border="false"
          style="margin-top: 0px"
        ></van-cell>
        <van-cell :title="'乙方: ' + retailer_name" :border="false"></van-cell>
        <van-cell
          style="text-indent: 2em; line-height: 30px"
          title="甲乙双方本着“合作共赢、互惠互信”的原则，处于双方长远战略上的考虑,双方决定共同携手,就共同开发优质客户,经友好协商,达成如下协议:"
          :border="false"
        />
        <van-cell title="1、合作纲领" :border="false" />
        <van-cell
          title="1.1 合作宗旨"
          style="padding-left: 2em"
          :border="false"
        />
        <van-cell
          title="甲乙双方的合作宗旨是通过双方紧密的合作,打造双赢、可持续发展的合作伙伴关系。"
          style="padding-left: 2em; line-height: 30px"
          :border="false"
        />
        <van-cell
          title="1.2 合作目标"
          style="padding-left: 2em"
          :border="false"
        />
        <van-cell
          :border="false"
          title="双方相信,通过本次合作,能够帮助双方共同开发优质客户资源,扩张市场份额,为双方创造更大的商业价值。"
          style="padding-left: 2em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3 双方义务"
          style="padding-left: 2em"
        />
        <van-cell
          :border="false"
          title="1.3.1 甲方提供茅台葡萄酒老树系列产品，用于乙方做为活动积分可兑换的礼品（积分有效期为1年）。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.2 甲方保证兑换价格不高于全国统一零售价。保证等积分兑换（1积分=1元）。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.3 甲方保证兑换的商品来自于茅台正规代理渠道。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.4 乙方需配合甲方的宣传活动。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.5 乙方严格按照活动方案履行，送出积分。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.6 乙方有义务告知消费者积分有效期。"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          :title="`1.3.7 乙方当日送出的积分，于次日向甲方结算，结算方式为：送出积分的${ratio}%。如未按期结算，造成消费者兑换失败的后果，由乙方自行承担。`"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.3.8 本合作协议，甲乙双方在履行过程中知悉的相关商业秘密，都具有保密的义务，因泄露相关信息，给对方造成的损失，应予以赔偿"
          style="padding-left: 3em; line-height: 30px"
        />
        <van-cell
          :border="false"
          title="1.4 合作期限"
          style="padding-left: 2em"
        />
        <van-cell
          :border="false"
          title="双方合作期限为长期，合作期间如有一方提前中止合作，需提前7天告知对方。"
          style="padding-left: 2em; line-height: 30px"
        />
        <van-cell :border="false" title="2、争议解决条款" />
        <van-cell
          :border="false"
          title="甲乙双方因履行本协议所发生的或与本协议有关的一切争议,应当友好协商解决。如协商不成,应由本协议签订地(葫芦岛市龙港区人民法院）管辖。"
          style="padding-left: 2em"
        />
        <van-cell :border="false" title="3、生效条款及其他" />
        <van-cell
          :border="false"
          title="3.1 本协议经甲、乙双方盖章之日起生效。"
          style="padding-left: 2em"
        />
        <van-cell
          :border="false"
          title="3.2 本协议执行过程中的未尽事宜,甲乙双方应本着实事求是的友好协商态度加以解决。双方协商一致的,签订补充协议,补充协议与本协议具有同等法律效力。"
          style="padding-left: 2em"
        />
        <van-cell
          :border="false"
          title="3.3 本协议正本一式两份,甲乙双方各执一份,具有同等法律效力。"
          style="padding-left: 2em"
        />
        <!-- <van-cell
          :border="false"
          style="
            font-size: 14px;
            margin-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
          "
        >
          <template #title>
            <div style="display: flex">
              <div>甲方(盖章):</div>
              <div style="flex: 1">

              </div>
              <div>乙方(盖章):</div>
              <div style="flex: 1">

              </div>
            </div>
          </template>
        </van-cell> -->
      </van-cell-group>
    </div>
    <img
      :src="imgUrl"
      style="width: 100%; margin-top: 20px"
      v-if="imgUrl.length > 0"
    />
    <!-- <div style="border: 2px solid #e6e6e6; background-color: white">
      <vue-esign
        ref="esign"
        :width="800"
        :height="300"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
    </div>
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button> -->

    <div style="margin: 32px">
      <van-button v-if="flag === 0 " round block type="info" @click="onRefresh"
        >厂家审核通过后,请刷新按钮</van-button
      >
      <van-button
        v-else
        round
        block
        type="primary"
        :loading="isLoading"
        loading-text="处理中..."
        @click="onConfirm"
        >合同确认</van-button
      >
    </div>
  </div>
</template>

<script>
import { getWxRetailerById, uploadContactImage } from "@/api/member";
import html2canvas from "html2canvas";
import NavBar from "@/components/NavBar";

export default {
  components: {
    NavBar,
  },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      retailer_name: "",
      isLoading: false,
      imgUrl: "",
      ratio: 0,
      flag:0,
      // lineWidth: 6,
      // lineColor: "#000000",
      // bgColor: "#ffffff",
      // resultImg: "",
      // isCrop: false,
    };
  },
  computed: {},
  methods: {
    onRefresh() {
      this.getRetailerByID();
    },
    onConfirm() {
      this.$toast.loading({
        message: "正在生成合同...",
        forbidClick: true,
      });
      // 配置信息获取
      let domCanvas = this.$refs.imageTofile; //  当前页面需要转化为海报的元素dom
      let width = domCanvas.scrollWidth; // 宽度
      let height = domCanvas.scrollHeight; // 高度
      let scale = window.devicePixelRatio;
      let opts = {
        scale: scale,
        width: width,
        height: height,
        useCORS: true, // 开启跨域配置
      };

      html2canvas(domCanvas, opts)
        .then((canvas) => {
          this.imgUrl = canvas.toDataURL("image/png");
          let pic = this.imgUrl.replace(/^data:image\/(png|jpg);base64,/, "");
          let data = new FormData();
          data.append("retailer_id", this.retailer_id);
          data.append("image", pic);
          uploadContactImage(data)
            .then(() => {
              this.$notify({
                type: "success",
                message: "合同上传成功",
              });
              this.$toast.clear();
              // this.$router.push({
              //   name: "Contact",
              //   params: { retailer_id: this.retailer_id },
              // });
              this.$router.replace(`/upload_image/${this.retailer_id}`);
            })
            .catch((error) => {
              console.log(error);
              this.$notify({
                type: "danger",
                message: "合同上传失败",
              });
              this.$toast.clear();
            });
        })
        .catch((err) => {
          console.log("html2canvas报错", err);
          this.$toast.clear();
        });
    },
    getRetailerByID() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      getWxRetailerById(this.retailer_id)
        .then((res) => {
          console.log(res);
          this.retailer_name = res.data.name;
          this.ratio = res.data.ratio || 0;
          this.flag = res.data.flag || 0;
          this.$toast.clear();
        })
        .catch(() => {
          this.$notify({
            type: "danger",
            message: "读取商家数据失败",
          });
          this.$toast.clear();
        });
    },
    // handleReset() {
    //   this.$refs.esign.reset();
    // },

    // handleGenerate() {
    //   this.$refs.esign
    //     .generate()
    //     .then((res) => {
    //       this.resultImg = res;
    //     })
    //     .catch((err) => {
    //       alert(err); // 画布没有签字时会执行这里 'Not Signned'
    //     });
    // },
  },
  created() {
    this.getRetailerByID();
  },
};
</script>

<style  scoped>
.van-cell {
  padding: 8px 16px;
  font-size: 14px;
}
</style>